<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入初始化样式文件 -->
    <link rel="stylesheet" href="CSS/base.css">
    <!-- 引入自己的样式文件 -->
    <link rel="stylesheet" href="CSS/index.css">
</head>

<body>
    <!-- 头部部分 -->
    <header>
        <div>
            <img src="images/logo.png" alt="">
        </div>
    </header>
    <!-- 中间部分 -->
    <div class="middle">
        <img src="images/loginbanner.png" alt="">
        <span>登录</span>
        <!-- 登录盒子 -->
        <div class="login">
            <div class="user">
                <img src="images/user.png" alt="">
                <input type="text" value="请输入用户名/邮箱" class="username">
            </div>
            <div class="pass">
                <img src="images/pass.png" alt="">
                <input type="text" value="请输入密码" class="passwords">
            </div>
            <div class="code">
                <img src="images/code.png" alt="">
                <input type="text" value="请输入验证码" class="codes">
                <img src="images/验证码.jfif" alt="">
                <a href="#">换一张</a>
            </div>
            <button class="denglu">登录</button>
            <!-- 注册盒子 -->
            <ul class="zhuce">
                <li>还没有账户?</li>
                <a href="register.html" class="register" target="_blank">注册></a>
                <li>忘记了您的账户信息?</li>
                <a href="#" class="search">查找账号/密码></a>
            </ul>
        </div>
    </div>
    <!-- 底部部分 -->
    <footer class="btn-footer">
        <p>
            <span class="btn1">| 平台承接单位
                <div class="btn1-list1">
                    <ul>
                        <li>北京科技大学</li>
                        <li>中国科学院宁波材料技术与工程研究所</li>
                        <li>天津南大通用数据技术股份有限公司</li>
                        <li>中国科学院数学与系统科学研究院</li>
                        <li>北京市计算中心</li>
                    </ul>
                </div>
                <span class="btn1-list2">
                    <ul>
                        <li>中国科学院计算机网络信息中心</li>
                        <li>中国科学院高能物理研究所</li>
                        <li>国家超级计算天津中心</li>
                        <li>四川大学</li>
                        <li>清华大学</li>
                    </ul>
                </span>
            </span>
            <p class="btn2-1">| 友情链接</p>
            <span class="btn2">
                <div class="btn2-list1">
                    <ul>
                        <li><a href="https://www.nhepsdc.cn/" target="_blank">国家高能物理科学数据中心</a></li>
                        <li><a href="https://ngdc.cncb.ac.cn/" target="_blank">国家基因组科学数据中心</a></li>
                        <li><a href="https://nmdc.cn/" target="_blank">国家微生物科学数据中心</a></li>
                        <li><a href="https://www.nssdc.ac.cn/mhsy/html/index.html" target="_blank">国家空间科学数据中心</a></li>
                        <li><a href="https://nadc.china-vo.org/" target="_blank">国家天文科学数据中心</a></li>
                        <li><a href="http://www.chinageoss.cn/dsp/home/index.jsp" target="_blank">国家对地观测科学数据中心</a></li>
                    </ul>
                </div>
                <div class="btn2-list2">
                    <ul>
                        <li><a href="https://www.chinare.org.cn/" target="_blank">国家极地科学数据中心</a></li>
                        <li><a href="https://data.tpdc.ac.cn/zh-hans/" target="_blank">国家青藏高原科学数据中心</a></li>
                        <li><a href="http://www.nesdc.org.cn/" target="_blank">国家生态科学数据中心</a></li>
                        <li><a href="https://www.corrdata.org.cn/" target="_blank">国家材料腐蚀与防护科学数据中心</a></li>
                        <li><a href="http://www.ncdc.ac.cn/" target="_blank">国家冰川冻土沙漠科学数据中心</a></li>
                        <li><a href="https://www.nmdc.ac.cn/" target="_blank">国家计量科学数据中心</a></li>
                    </ul>
                </div>
                <div class="btn2-list3">
                    <ul>
                        <li><a href="http://www.geodata.cn/" target="_blank">国家地球系统科学数据中心</a></li>
                        <li><a href="https://www.ncmi.cn/" target="_blank">国家人口健康科学数据中心</a></li>
                        <li><a href="http://www.nsdata.cn/" target="_blank">国家基础学科公共科学数据中心</a></li>
                        <li><a href="https://www.agridata.cn/#/home" target="_blank">国家农业科学数据中心</a></li>
                        <li><a href="http://www.forestdata.cn/" target="_blank">国家林业和草原科学数据中心</a></li>
                        <li><a href="https://data.cma.cn/" target="_blank">国家气象科学数据中心</a></li>
                    </ul>
                </div>
                <div class="btn2-list4">
                    <ul>
                        <li><a href="https://data.earthquake.cn/" target="_blank">国家地震科学数据中心</a></li>
                        <li><a href="http://mds.nmdis.org.cn/" target="_blank">国家海洋科学数据中心</a></li>
                        <li><a href="https://www.corrdata.org.cn/" target="_blank">国家材料腐蚀与防护科学数据中心</a></li>
                    </ul>
                </div>
            </span>
        </p>
    </footer>
    <script>
        var username = document.getElementsByClassName('username');
        var passwords = document.getElementsByClassName('passwords');
        var code = document.getElementsByClassName('codes');
        console.log(code);
        username[0].onfocus = function() {
            if (this.value == '请输入用户名/邮箱') {
                this.value = '';
            }
        }
        username[0].onblur = function() {
            if (this.value == '') {
                this.value = '请输入用户名/邮箱';
            }
        }

        passwords[0].onfocus = function() {
            if (this.value == '请输入密码') {
                this.value = '';
                this.type = 'password';
            }
        }

        passwords[0].onblur = function() {
            if (this.value == '') {
                this.type = 'text';
                this.value = '请输入密码';
            }
        }

        code[0].onfocus = function() {
            if (this.value == '请输入验证码') {
                this.value = '';
            }
        }

        code[0].onblur = function() {
            if (this.value == '') {
                this.value = '请输入验证码';
            }
        }
    </script>
</body>

</html>